<template>
  <div id="profile">
    <div class="bg"></div>
    <profile-head></profile-head>
    <div class="my-asset">
      <h2 class="tt">我的资产</h2>
      <div class="assets">
        <div class="assetitem" v-for="(item,index) in assetname" :key="index">
          <p class="assetcount">0</p>
          <p class="assetname">{{ item }}</p>
        </div>
      </div>
    </div>
    <div class="list">
      <van-grid :column-num="3" icon-size="25px">
        <van-grid-item
          v-for="(item, index) in menu"
          :key="index"
          :icon="item.icon"
          :text="item.txt"
        />
      </van-grid>
    </div>
    <div class="exit">退出登录</div>
  </div>
</template>
<script>
import ProfileHead from "components/profile/ProfileHead.vue";
export default {
  name: "Profile",
  components: {
    ProfileHead
  },
  data() {
    return {
      assetname: ["余额", "红包", "优惠券", " 津贴", "礼品卡"],
      menu: [
        {
          txt: "我的订单",
          icon: "label-o"
        },
        {
          txt: "账号管理",
          icon: "friends-o"
        },
        {
          txt: "我的手机号",
          icon: "phone-o"
        },
        {
          txt: "周六一起拼",
          icon: "calendar-o"
        },
        {
          txt: "售后服务",
          icon: "balance-list-o"
        },
        {
          txt: "邀请返利",
          icon: "envelop-o"
        },
        {
          txt: "优先购",
          icon: "cart-circle-o"
        },
        {
          txt: "积分中心",
          icon: "gold-coin-o"
        },
        {
          txt: "会员俱乐部",
          icon: "diamond-o"
        },
        {
          txt: "地址管理",
          icon: "location-o"
        },
        {
          txt: "支付安全",
          icon: "cash-on-deliver"
        },
        {
          txt: "帮助与客服",
          icon: "service-o"
        },
        {
          txt: "意见反馈",
          icon: "records"
        },
        {
          txt: "我的竞拍",
          icon: "points"
        }
      ]
    };
  }
};
</script>
<style scoped>
#profile {
  margin-bottom: 50px;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #eee;
}
.my-asset {
  background-color: #fff;
  margin-bottom: 10px;
}
.my-asset .tt {
  margin-left: 15px;
  border-bottom: 0.5px solid #d9d9d9;
  text-align: left;
  line-height: 52px;
  font-size: 14px;
}
.my-asset .assets {
  display: flex;
}
.my-asset .assets .assetitem {
  flex: 1;
  padding-top: 16px;
  height: 80px;
  text-align: center;
}
.my-asset .assets .assetitem .assetcount {
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.my-asset .assets .assetitem .assetname {
  font-size: 12px;
  line-height: 18px;
}
.list {
  background-color: #fff;
}
.exit {
  height: 48px;
  margin-top: 20px;
  margin-bottom: 60px;
  font-size: 14px;
  text-align: center;
  line-height: 48px;
  background-color: #fff;
}
</style>